<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="renderer" content="webkit">
    <title>会员分析</title>

    <script type="text/javascript" src="../resources/js/contants.js"></script>
    <link th:href="@{css/page/bootstrap.min.css}" rel="stylesheet">
    <link th:href="@{css/page/font-awesome.css}" rel="stylesheet">
    <link th:href="@{css/page/style.min.css}" rel="stylesheet">
    <link th:href="@{css/page/dateRange.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{css/page/layer.css}" style="">
    <link rel="stylesheet" th:href="@{css/page/layer.ext.css}" style="">
    <link rel="stylesheet" th:href="@{css/page/style.css}" style="">
</head>

<body class="gray-bg">
<div class="wrapper wrapper-content">
    <div class="row">
        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                        <span class="pull-right">
                            <button id="user_time_show_bt" type="button" class="btn btn-default no-margins no-borders no-paddings" style="padding-bottom: 0px">
                                <span id="user_date"></span>
                                <span class="caret"></span>
                            </button>
                        </span>
                    <h5>各访客在对应时间端的变化情况</h5>
                </div>
                <div class="ibox-content">
                    <div id="depth_users">-</div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">昨日</span>
                    <h5>各访客访问深度分布情况</h5>
                </div>
                <div class="ibox-content">
                    <div id="visit_depth_users">-</div>
                </div>
            </div>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-9">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                        <span class="pull-right">
                            <button id="visit_time_show_bt" type="button" class="btn btn-default no-margins no-borders" style="padding-bottom: 0px">
                                <span id="visit_date"></span>
                                <span class="caret"></span>
                            </button>
                        </span>
                    <h5>各访客在对应时间端的变化情况</h5>
                </div>
                <div class="ibox-content">
                    <div id="depth_visits">-</div>
                </div>
            </div>
        </div>
        <div class="col-sm-3">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <span class="label label-success pull-right">昨日</span>
                    <h5>各会话访问深度分布情况</h5>
                </div>
                <div class="ibox-content">
                    <div class="no-margins" id="visit_depth_visits">-</div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript" th:src="@{js/page/jquery-2.1.1.min.js}"></script>
<script type="text/javascript" th:src="@{js/page/dateRange.js}"></script>
<script type="text/javascript" th:src="@{js/page/highcharts.js}"></script>
<script type="text/javascript" th:src="@{js/page/exporting.js}"></script>
<script type="text/javascript" th:src="@{js/page/json2.js}"></script>
<script type="text/javascript" th:src="@{js/page/common.js}"></script>

<script type="text/javascript">
    var depthKeys = ["pv_1", "pv_2", "pv_3", "pv_4", "pv_5_10", "pv_11_30", "pv_31_60", "pv_61_plus"];

    function loadHead(sd, ed) {
        var activeUserUrl = COMMON_PREFIX_URL + "/stats/summary/depth?metric=view_depth_of_user&platform=website";
        activeUserUrl += "&start_date=" + sd + "&end_date=" + ed;
        $.get(activeUserUrl, {}, function(data){
            if (data.code == '200' && data.data.length > 0) {
                var dd = data.data[0];

                var activeUserSeries = {
                    name: "活跃访客访问深度信息",
                    data: []
                };
                $.each(depthKeys, function(i, key) {
                    var v = dd["$" + key];
                    addObject(activeUserSeries["data"], [key, v], v && v != 0);
                });
                showPie("visit_depth_users", activeUserSeries);
            } else {
                $("#visit_depth_users").html("-");
            }
        }, "json");

        var visitUrl = COMMON_PREFIX_URL + "/stats/summary/depth?metric=view_depth_of_session&platform=website";
        visitUrl += "&start_date=" + sd + "&end_date=" + ed;
        $.get(visitUrl, {}, function(data){
            if (data.code == '200' && data.data.length > 0) {
                var dd = data.data[0];

                var series = {
                    name: "活跃访客访问深度信息",
                    data: []
                };
                $.each(depthKeys, function(i, key) {
                    var v = dd["$" + key];
                    addObject(series["data"], [key, v], v && v != 0);
                });
                showPie("visit_depth_visits", series);
            } else {
                $("#visit_depth_visits").html("-");
            }
        }, "json");
    };

    function loadActiveUserContent(sd, ed) {
        var url = COMMON_PREFIX_URL + "/stats/groupBy/depth?metric=view_depth_of_user&platform=website&group_by=day";
        url += "&start_date=" + sd + "&end_date=" + ed;
        $.get(url, {}, function(data){
            if (data.code == '200') {
                if (data.data.length == 0) {
                    showNoConnent("depth_users");
                    return ;
                }
                var categories = [];
                var pv1Series = {name:"pv_1活跃访客量", data:[]};
                var pv2Series = {name:"pv_2活跃访客量", data:[]};
                var pv3Series = {name:"pv_3活跃访客量", data:[]};
                var pv4Series = {name:"pv_4活跃访客量", data:[]};
                var pv5Series = {name:"pv_5_10活跃访客量", data:[]};
                var pv6Series = {name:"pv_11_30活跃访客量", data:[]};
                var pv7Series = {name:"pv_31_60活跃访客量", data:[]};
                var pv8Series = {name:"pv60+活跃访客量", data:[]};
                var chart;

                if (data.data.length == 1) {
                    $.each(data.data, function(i, item) {
                        categories.push(item["day"]);
                        var v = item["$pv_1"];
                        addObject(pv1Series["data"], v, v && v != 0);
                        v = item["$pv_2"];
                        addObject(pv2Series["data"], v, v && v != 0);
                        v = item["$pv_3"];
                        addObject(pv3Series["data"], v, v && v != 0);
                        v = item["$pv_4"];
                        addObject(pv4Series["data"], v, v && v != 0);
                        v = item["$pv_5_10"];
                        addObject(pv5Series["data"], v, v && v != 0);
                        v = item["$pv_11_30"];
                        addObject(pv6Series["data"], v, v && v != 0);
                        v = item["$pv_31_60"];
                        addObject(pv7Series["data"], v, v && v != 0);
                        v = item["$pv_61_plus"];
                        addObject(pv8Series["data"], v, v && v != 0);
                    });
                    chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'depth_users', // 在那个标签上显示，指定id即可
                            type: 'column'
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            min: 0,
                            title : {
                                text : "访客数量"
                            }
                        }],
                        series : []
                    });
                } else {
                    $.each(data.data, function(i, item) {
                        categories.push(item["day"]);
                        pv1Series["data"].push(notNull(item["$pv_1"]));
                        pv2Series["data"].push(notNull(item["$pv_2"]));
                        pv3Series["data"].push(notNull(item["$pv_3"]));
                        pv4Series["data"].push(notNull(item["$pv_4"]));
                        pv5Series["data"].push(notNull(item["$pv_5_10"]));
                        pv6Series["data"].push(notNull(item["$pv_11_30"]));
                        pv7Series["data"].push(notNull(item["$pv_31_60"]));
                        pv8Series["data"].push(notNull(item["$pv_61_plus"]));
                    });
                    chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'depth_users', // 在那个标签上显示，指定id即可
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            min: 0,
                            title : {
                                text : "访客数量"
                            }
                        }],
                        series : []
                    });
                }
                chart.addSeries(pv1Series);
                chart.addSeries(pv2Series);
                chart.addSeries(pv3Series);
                chart.addSeries(pv4Series);
                chart.addSeries(pv5Series);
                chart.addSeries(pv6Series);
                chart.addSeries(pv7Series);
                chart.addSeries(pv8Series);
                chart.xAxis[0].setCategories(categories);
            } else {
                showNoConnent("depth_users", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
            }
        }, "json");
    };

    function loadVisitContent(sd, ed) {
        var url = COMMON_PREFIX_URL + "/stats/groupBy/depth?metric=view_depth_of_session&platform=website&group_by=day";
        url += "&start_date=" + sd + "&end_date=" + ed;
        $.get(url, {}, function(data){
            if (data.code == '200') {
                if (data.data.length == 0) {
                    showNoConnent("depth_visits");
                    return ;
                }
                var categories = [];
                var pv1Series = {name:"pv_1会话数", data:[]};
                var pv2Series = {name:"pv_2会话数", data:[]};
                var pv3Series = {name:"pv_3会话数", data:[]};
                var pv4Series = {name:"pv_4会话数", data:[]};
                var pv5Series = {name:"pv_5_10会话数", data:[]};
                var pv6Series = {name:"pv_11_30会话数", data:[]};
                var pv7Series = {name:"pv_31_60会话数", data:[]};
                var pv8Series = {name:"pv60+会话数", data:[]};
                var chart;

                if (data.data.length == 1) {
                    $.each(data.data, function(i, item) {
                        categories.push(item["day"]);
                        var v = item["$pv_1"];
                        addObject(pv1Series["data"], v, v && v != 0);
                        v = item["$pv_2"];
                        addObject(pv2Series["data"], v, v && v != 0);
                        v = item["$pv_3"];
                        addObject(pv3Series["data"], v, v && v != 0);
                        v = item["$pv_4"];
                        addObject(pv4Series["data"], v, v && v != 0);
                        v = item["$pv_5_10"];
                        addObject(pv5Series["data"], v, v && v != 0);
                        v = item["$pv_11_30"];
                        addObject(pv6Series["data"], v, v && v != 0);
                        v = item["$pv_31_60"];
                        addObject(pv7Series["data"], v, v && v != 0);
                        v = item["$pv_61_plus"];
                        addObject(pv8Series["data"], v, v && v != 0);
                    });
                    chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'depth_visits', // 在那个标签上显示，指定id即可
                            type: 'column'
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            min: 0,
                            title : {
                                text : "会话个数"
                            }
                        }],
                        series : []
                    });
                } else {
                    $.each(data.data, function(i, item) {
                        categories.push(item["day"]);
                        pv1Series["data"].push(notNull(item["$pv_1"]));
                        pv2Series["data"].push(notNull(item["$pv_2"]));
                        pv3Series["data"].push(notNull(item["$pv_3"]));
                        pv4Series["data"].push(notNull(item["$pv_4"]));
                        pv5Series["data"].push(notNull(item["$pv_5_10"]));
                        pv6Series["data"].push(notNull(item["$pv_11_30"]));
                        pv7Series["data"].push(notNull(item["$pv_31_60"]));
                        pv8Series["data"].push(notNull(item["$pv_61_plus"]));
                    });
                    chart = new Highcharts.Chart({
                        chart : {
                            renderTo : 'depth_visits', // 在那个标签上显示，指定id即可
                        },
                        xAxis : {
                            title : {
                                text : "日期"
                            }
                        },
                        yAxis : [{
                            min: 0,
                            title : {
                                text : "会话个数"
                            }
                        }],
                        series : []
                    });
                }
                chart.addSeries(pv1Series);
                chart.addSeries(pv2Series);
                chart.addSeries(pv3Series);
                chart.addSeries(pv4Series);
                chart.addSeries(pv5Series);
                chart.addSeries(pv6Series);
                chart.addSeries(pv7Series);
                chart.addSeries(pv8Series);
                chart.xAxis[0].setCategories(categories);
            } else {
                showNoConnent("depth_visits", "获取数据失败，失败code为:" + data.code + ", 失败信息描述为:" + data.msg);
            }
        }, "json");
    };

    $(document).ready(function(){
        var sd = date2YmdStr(getYesterDay());
        var ed = sd;
        loadHead(sd, ed);

        var startDate = getStartDate();
        var endDate = getEndDate();
        // 加载数据
        loadActiveUserContent(startDate, endDate);
        loadVisitContent(startDate, endDate);

        // 开始加载时间控件
        new AE_Date('user_date','user_time_show_bt',function(startDate, endDate){
            loadActiveUserContent(startDate, endDate);
        }, startDate, endDate);
        new AE_Date('visit_date','visit_time_show_bt',function(startDate, endDate){
            loadVisitContent(startDate, endDate);
        }, startDate, endDate);
    });

    function notNull(value) {
        if (value) {
            return value;
        } else {
            return 0;
        }
    }

    function addObject(arr, obj, flag) {
        if (flag) {
            arr.push(obj);
        }
    }

    function showPie(id, series) {
        if (series && series["data"] && series["data"].length > 0) {
            var chart = new Highcharts.Chart({
                chart: {
                    renderTo: id,
                    type: 'pie'
                },
                tooltip: {
                    pointFormat: '{series.name}:<b>{point.percentage:.1f}%</b>({point.y})',
                    shared: false
                },
                series: []
            });
            chart.addSeries(series);
        }
    }
</script>
</body>
</html>